<template>
  <div class="app-container">
    <TableFilter
      :data="filter"
      v-model="query"
      ref="filter"
      @change="changeFilter"
    ></TableFilter>
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f2f2f2' }"
    >
      <el-table-column prop="科室" label="科室"> </el-table-column>
      <el-table-column prop="总人数" label="在院人数"> </el-table-column>
      <el-table-column prop="入径" label="入径人数"> </el-table-column>
      <el-table-column prop="address" label="入径率">
        <template slot-scope="{ row }">
          {{ ((row.入径 / row.总人数) * 100).toFixed(0) + "%" }}
        </template>
      </el-table-column>
      <el-table-column prop="费用超标" label="费用超标"> </el-table-column>
      <!-- <el-table-column prop="病组编码" label="病组编码"> </el-table-column> -->
      <el-table-column prop="重复住院" label="重复入院"> </el-table-column>
      <el-table-column prop="费用结构不合理" label="费用结构不合理">
      </el-table-column>
      <el-table-column prop="违规项目较多" label="违规项目多">
      </el-table-column>
      <el-table-column prop="违反核心治疗" label="违反核心治疗">
      </el-table-column>
      <el-table-column prop="并发症消耗过大" label="并发症消耗过大">
      </el-table-column>
    </el-table>
    <!-- <div class="flex-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getrptrjqkzy } from "@/api/statistics";
import { UserModule } from "@/store/modules/user";
import { dept2doc } from "@/api/patient";
import TableFilter from "@/components/TableFilter";
import dayjs from "@/utils/dayjs.min.js";
@Component({
  name: "zybrrjqk",
  components: {
    TableFilter,
  },
  computed: {
    filter() {
      return {
        inline: [
          // {
          //   props: {
          //     label: "科室",
          //     is: "el-select",
          //     filterable: true,
          //     options: this.deptList
          //   },
          //   keys: "ksmc"
          // }
        ],
      };
    },
  },
})
export default class extends Vue {
  private query: any = {
    ksmc: "",
  };
  private dataInfo: any = null;
  private deptList: any = [];
  private tableData: any = [];
  private async created() {
    this.getData();
    this.getDepts();
  }
  private async getData() {
    const res = await getrptrjqkzy(this.query);
    this.tableData = res.data;
  }
  private changeFilter(e) {
    let data = {
      ...e,
    };
    for (let key in data) {
      if (!data[key] && data[key] != 0) delete data[key];
    }
    this.query = data;
    this.getData();
  }
  public async getDepts() {
    // let curDate = new Date();
    // let t = `${this.Format("yyyyMMddh", curDate)}${parseInt(
    //   curDate.getMinutes() / 5 + ""
    // )}`;
    let d: any = await dept2doc({ t: dayjs().format("YYYYMMDD") });

    d = d.data || [];
    let deptts = Array.from(new Set(d.map((it: any) => it.科室)));
    this.deptList = [...deptts.map((it: any) => ({ label: it, value: it }))];
  }

  // private handleCurrentChange(val) {
  //   this.query.current = val;
  //   this.getData();
  // }
  // private handleSizeChange(val) {
  //   this.query.pageSize = val;
  //   this.getData();
  // }
}
</script>

<style lang="scss" scoped>
.flex-end {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
